<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('SEO设置')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
    <th:block th:include="include :: tinymce"/>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                 <form class="form-horizontal m-t" id="signupForm">
                     <div class="form-group">
                         <label class="col-sm-3 control-label">网站logo</label>
                         <div class="col-sm-8">
                             <input type="hidden" name="logo" id="logo" th:value="${logo}"/>
                             <input id="singleFile" name="file" type="file">
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="col-sm-3 control-label">网站标题</label>
                         <div class="col-sm-8">
                             <input id="title" th:value="${title}" name="title" class="form-control" type="text">
                             <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 网站的标题</span>
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="col-sm-3 control-label">网站副标题</label>
                         <div class="col-sm-8">
                             <input id="subTitle" th:value="${subTitle}" name="subTitle" class="form-control" type="text">
                             <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 网站的副标题</span>
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="col-sm-3 control-label">网站关键词</label>
                         <div class="col-sm-8">
                             <input id="keywords" th:value="${keywords}" name="keywords" class="form-control" type="text">
                             <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> meta标签name="keywords"</span>
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="col-sm-3 control-label">网站描述</label>
                         <div class="col-sm-8">
                             <textarea id="description" th:text="${description}" name="description" class="form-control" type="text" rows="5"></textarea>
                             <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> meta标签name="description"</span>
                         </div>
                     </div>
                     <div class="form-group">

                         <label class="col-sm-3 control-label">网站备案号</label>
                         <div class="col-sm-8">
                             <textarea class="summernote" id="filings" name="filings" th:utext="${filings}">

                             </textarea>
                         </div>
                     </div>
                     <div class="form-group">
                         <label class="col-sm-3 control-label">底部信息</label>
                         <div class="col-sm-8">
                             <textarea class="summernote" id="bottomInfo" name="bottomInfo" th:utext="${bottomInfo}">

                             </textarea>
                         </div>
                     </div>
                     <div class="form-group">
                         <div class="col-sm-8 col-sm-offset-3">
                             <button class="btn btn-primary" type="button" onclick="save()">保存</button>
                         </div>
                     </div>
                 </form>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
</body>
<script type="text/javascript">
    initFile('singleFile', 'logo')

    var icon = "<i class='fa fa-times-circle'></i> ";
    $("#signupForm").validate({
        rules: {
            title: "required",
            keywords: "required"
        },
        messages: {
            title: icon + "必填项",
            keywords: icon + "必填项"
        }
    });


    initTinyMec('#filings', {min_height: 300})
    initTinyMec('#bottomInfo', {min_height: 300})

    function save() {
        if (!$.validate.form()){
            return
        }
        const data = {
            title: $('#title').val(),
            subTitle: $('#subTitle').val(),
            keywords: $('#keywords').val(),
            description: $('#description').val(),
            filings: tinyMCE.get('filings').getContent(),
            bottomInfo: tinyMCE.get('bottomInfo').getContent(),
            logo: $('#logo').val()
        }

        $.modal.loading("保存中...");
        $.post(ctx + 'info/info/saveSeo', data, function(res) {
            $.modal.closeLoading();
            // window.location.reload()
        })
    }

    function initFile(fileId, urlId) {
        var urlEl = $('#'+urlId)
        const val = urlEl.val()
        const preview = []
        if(val) {
            preview.push(base + val)
        }

        $('#'+fileId).fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true,
            initialPreviewAsData: true,
            initialPreview: preview
        }).on('fileuploaded', function (event, data, previewId, index) {
            var rsp = data.response;
            urlEl.val(rsp.fileName)
        }).on('fileremoved', function (event, id, index) {
            urlEl.val('')
            $("input[name='" + event.currentTarget.id + "']").val('')
        }).on('filedeleted', function() {
            urlEl.val('')
        }).on('filesuccessremove', function() {
            urlEl.val('')
        }).on('filecleared', function() {
            urlEl.val('')
        })
    }

</script>

</html>